/*
  学习目标：深入props-children属性
  类似：vue中的插槽
  本质：组件标签夹着的内容区域
  特点：
    childre属性可以是任意数据类型，与props的其它属性没有区别

*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        {/* string number */}
        {/* <Child>我是child里面的内容</Child>
        <Child>{123}</Child> */}
        {/* boolean undefined null */}
        {/* <Child>{true}</Child>
        <Child>{undefined}</Child>
        <Child>{null}</Child> */}
        {/* 对象 */}
        {/* <Child>{{ name: 'zs', age: 20 }}</Child> */}
        {/* 数组 */}
        {/* <Child>{[1, 2, 3]}</Child> */}
        {/* 🤞函数，使用时记得调用 */}
        <Child2>{() => <i>我是child传过来的函数</i>}</Child2>

        {/* 🤞jsx */}
        <Child>
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
          </ul>
        </Child>
      </div>
    );
  }
}

function Child(props) {
  console.log('props -----> ', props);
  return <div>我是子组件Child - {props.children}</div>;
}

function Child2(props) {
  console.log('props -----> ', props);
  return <div>我是子组件Child2 - {props.children()}</div>;
}
